<template>
	<view class="collocation">
		<view class="title">搭配购买</view>
		<view class="goods-box">
			<scroll-view class="goods-scroll-box" @scroll="myFunction" scroll-x="true" >
				<view id="goodsScrollId">
					<view class="goods-item" v-for="(item,i) in goodsCollocation" :key="i"  :id="i===0?'firstGoods':''">
						<view class="goods-item-content">
							<view class="goods-top" @click="goGoodsPage(item)">
								<Img :src="item.goodsImage" :customStyle="{width:'222rpx',height:'222rpx',borderRadius:'8rpx'}"  class="goods-img"/>
								
							</view>
							<view class="goods-info">
								<view class="hidden-1 goods-name">{{item.goodsName}}</view>
								<view class="hidden-1 goods-brand">{{item.brandName}}</view>
								<view class="hidden-1 goods-spec">{{item.goodsSpec}}</view>
							</view>
							<view class="goods-bottom">
								<view class="price-box">
									<price :price="item.goodsPrice" :taxPrice="item.goodsCostPrice" />
									<!-- <view class="now-price">￥{{item.goodsPrice}}</view>
									<view class="before-price">￥{{item.goodsCostPrice}}</view> -->
								</view>
								<view class="goods-add-cart"><add-cart  :goods="item" /></view>
								
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="progress-box" v-if="goodsBoxCanScroll>20">
			<view class="progress-parent">
				<view class="progress-child" :style="{'left':barNum+'rpx'}"></view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	import Img from '@/components/goods/img.vue'
	import addCart from '@/components/goods/addCart.vue'
	import price from '@/components/goods/price.vue'
	export default {
		components:{Img,addCart,price},
		props:{
			storeInfo:{
				type:Object,
				default:()=>{}
			}
		},
		data() {
			return {
				goodsBoxCanScroll:0,
				barNum:'0%',
			}
		},
		computed:{
			...mapState({
				goodsCollocation: state => state.goods.goodsCollocation,
			})
		},
		created() {
			this.getGoodsCollocation()
		},
		watch:{
			'goodsCollocation.length'(){
				this.init()
			}
		},
		methods: {
			...mapActions(['ActGetGoodsCollocation']),
			async getGoodsCollocation(){
				await this.ActGetGoodsCollocation({storeId:uni.getStorageSync('storeId'),current:1,size:10})
			},
			goGoodsPage(item){
				this.$u.route({
					url: 'pages/goods/detail',
					params: {
						id: item.goodsId
					}
				})
			},
			myFunction(e){
				this.barNum = Math.floor(e.detail.scrollLeft)*56/Math.floor(this.goodsBoxCanScroll)
			},
			init(){
				this.$nextTick(()=>{
					const query = uni.createSelectorQuery().in(this);
					let outWidth = 0
					query.select('#goodsScrollId').boundingClientRect(data => {
					  outWidth = Math.floor(data.width)
					}).exec();
					query.select('#firstGoods').boundingClientRect(data => {
					  let goodsSumWidth = Math.floor(data.width * this.goodsCollocation.length)
					  if (goodsSumWidth>outWidth){
						  this.goodsBoxCanScroll = goodsSumWidth - outWidth
					  }else{
						  this.goodsBoxCanScroll = 0
					  }
					}).exec();
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hidden-1{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.collocation{
		background-color: #fff;
		margin-bottom: 16rpx;
		padding-bottom: 24rpx;
		.title{
			position: relative;
			font-size: 28rpx;
			color:$u-main-color;
			font-weight: 700;
			line-height: 48rpx;
			padding:20rpx 0;
			padding-left: 40rpx;
			&:before{
				position: absolute;
				display: block;
				content: '';
				height:30rpx;
				width:6rpx;
				background-color: $u-type-primary;
				top:30rpx;
				left:24rpx;
			}
		}
		.goods-box{
			overflow-x: auto;
			overflow-y: hidden;
			padding-left:24rpx;
			width:100%;
			// white-space:nowrap;
			.goods-scroll-box{
				white-space:nowrap;
				// width:auto;
			}
			.goods-item{
				// width:238rpx;
				display: inline-block;
				padding-right:16rpx;
				.goods-item-content{
					width:222rpx;
				}
				.goods-top{
					
				}
				.goods-info{
					padding:8rpx 8rpx 0;
					.goods-name{
						font-size: 26rpx;
						color:$u-main-color;
						line-height: 36rpx;
					}
					.goods-brand,.goods-spec{
						font-size: 24rpx;
						color:$u-tips-color;
					}
				}
				.goods-bottom{
					padding:0 8rpx;
					// display: flex;
					// justify-content: space-between;
					// align-items: center;
					.price-box{
						// flex:1;
					}
					.now-price{
						color:$u-type-error;
						font-size: 26rpx;
						font-weight: 700;
						word-break: break-all;
						word-wrap:break-word;
						white-space:normal;
					}
					.before-price{
						color:$u-tips-color;
						font-size: 22rpx;
						text-decoration:line-through;
					}
					.goods-add-cart{
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}
		.progress-box{
			padding-top:24rpx;
		}
		.progress-parent{
			margin:0 auto;
			width:80rpx;
			height:6rpx;
			border-radius: 36rpx;
			background: #dbdbdb;
			position: relative;
			overflow: hidden;
			.progress-child{
				position: absolute;
				left:0;
				top:0;
				bottom:0;
				width:24rpx;
				background: $u-type-primary;
			}
		}
	}
</style>
